<template>
 
    <!-- 轮播图容器 -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- 图片-->
    <div class="swiper-slide" v-for="(url,index) in img" :key="index">
      <!-- 将src写活 -->
      <img :src="url" />  
    </div>
   
   
   
  </div>
  <!-- 分页器 -->
  <div class="swiper-pagination"></div>

  <!-- 前进后退按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

 
</div>
</template>

<script>
 
import "swiper/swiper-bundle.min.css";  // 所有 Swiper 样式，包括所有模块样式（如导航、分页等）
import Swiper,{ Navigation, Pagination} from "swiper"; // 导入您需要的模块
import SwiperCore, { Autoplay } from "swiper";
Swiper.use([ Navigation, Pagination, Autoplay])  //注册
// 引入axios
import axios from 'axios'
export default {
  name:'Banner',
  data(){
    return {
      img:[]  //将图片路径放在一个数组里面
    }
  },
  mounted(){
    axios({
      url:'http://localhost:3000'
    })
    // 采用.then去接受axios请求回来的数据
    .then(res=>{  //因为下面采用了this所有这里必须要写箭头函数，不然会影响this指向
      this.img = res.data  //data为一个图片路径数组

      this.$nextTick(()=>{
        this.crateSwiper();

        // 深入响应式原理：
        // vue2中，当数据改变时，并不会理解更新dom。而是会把数据引起的dom更新放在一个异步更新队列里进行排队。
      //         等到下次事件循环更新队列时,才会执行队列的代码(进行dom的处理)，这样的话，意味着程序员没法在更新数据后，使用新的dom
      //         所以,vue提供了一个$nextTick()，只需要程序员把操作新dom的代码传给$nextTick，$nextTick()内部会在dom重新渲染之后，调用传入的代码

      })
    })
  },
 
 methods:{
  crateSwiper(){  //将重新渲染封装在一个函数里面
      const swiper = new Swiper('.swiper-container',{
        loop:true,  //是否需要循环播放
       
        autoplay: {//当你不单独的引用autoplay的话，这个属性添加在这里是没有效果的
          delay: 2000, //3秒切换一次
        },
        //如果需要分页器
        pagination:{
          el:'.swiper-pagination'
        },
      

        // 如果需要前进后退按钮np
        navigation:{
          next:'.swiper-button-next',
          prev:'.swiper-button-prev'
        }
      })
     },
      }
};
</script>

<style scoped>
.swiper-container{
  height: 12.5rem;
  width: 100%;
  background-color: rgba(236, 219, 219, 0.875);
  border-radius: .9375rem;
}

img{
  width: 100%;
  height: 100%;
}

</style>